<template>
  <flexbox :gutter="0" class="bottom-normal vux-1px-t">
    <flexboxItem>
      <router-link :to="{ name: 'ToDoList' }">审批记录</router-link>
    </flexboxItem>
    <flexboxItem>
      <router-link :to="{ name: 'ApplicationList' }" :class="{ 'vux-1px-l': hasManyItem }">我的申请</router-link>
    </flexboxItem>
  </flexbox>
</template>

<script>
  import { Flexbox, FlexboxItem } from 'vux';
  export default {
    name: 'BottomNormal',
    components: {
      Flexbox,
      FlexboxItem
    },
    data () {
      return {
        hasManyItem: false
      };
    },
    mounted () {
      let bottomItemLength = document.querySelectorAll('.bottom-normal a').length;
      this.hasManyItem = bottomItemLength > 1;
    }
  };
</script>

<style scoped lang="scss">
  @import '../../assets/style/variable';

  .bottom-normal{
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 2;
    &:before{
      top: -.5px;
      border-color: #ccc;
    }
    a{
      display: block;
      position: relative;
      font-size: getRem(32);
      line-height: getRem(98);
      background: #fff;
      text-align: center;
    }
    .vux-1px-l{
      &:before{
        border-color: #ccc;
      }
      &.router-link-active:before{
        border-color: transparent;
      }
    }
    .router-link-active{
      color: #fff;
      background-image: linear-gradient(97deg, 
        #fa5864 0%, 
        #fc476d 100%), 
      linear-gradient(
        #ffffff, 
        #ffffff);
      background-blend-mode: normal, 
        normal;
    }
  }
</style>
